
{include file="common/header"}
<script>
        $('#example-navbar-collapse>ul>li').removeClass('active')
        $($('#example-navbar-collapse>ul>li')[1]).addClass('active')
    </script>
<style>
    .form-group {
        float: unset!important;
        margin-left: auto;
        margin-right: auto;
    }

    form {
        float: unset!important;
        margin-left: auto!important;
        margin-right: auto!important;
    }

    #main-block {
        display: flex;
        justify-content: space-between;
        margin-top: 80px;
    }
</style>
<div id="main-block">
    <div class="container">

        <div class="container col-md-3" id="left-menu">
            <div id="sidebar" class="span3">
                <div class="sidebar-nav well">
                    <ul class="nav nav-list">
                        <li class="nav-header">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">类型选择</font>
                            </font>
                        </li>
                        <li v-for="(li,i) in items" v-bind:class="{active:li.isSelect}">
                            <a href="javascript:;" @click.self.prevent="onSelect(i)">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;"> {{ li.name }}</font>
                                </font>
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
        <script>
            var left_menu = new Vue({
                el: '#left-menu',
                data: {
                    items: [{
                        name: "德育类型",
                        engName: "varture",
                        isSelect: true
                    }, {
                        name: "智育类型",
                        engName: "wit",
                        isSelect: false
                    }, {
                        name: "体育类型",
                        engName: "sports",
                        isSelect: false
                    }, {
                        name: "其他",
                        engName: "other_add",
                        isSelect: false
                    }
                    ],
                    selected: 0
                }, methods: {
                    onSelect: function (e) {
                        this.items[this.selected].isSelect = false
                        this.items[e].isSelect = true
                        this.selected = e
                        appFrom.types = this.items[e].name
                        appFrom.Etypes = this.items[e].engName
                        appFrom.oneClass = null
                        appFrom.twoClass = null
                        appFrom.isTwoC = false
                    }
                }

            })
        </script>

        <style>
            .active a {
                color: white;
            }
        </style>



        <div id="app-form" class="col-md-7">

            <form class="" @submit.prevent="submit">
                <center>
                    <h3>{{types}}</h3>
                </center>
                <div class="form-group">
                    <label for="exampleInputEmail1">获奖名称</label>
                    <input type="text" class="form-control" id="name" placeholder="共青团第二课堂" v-model="pro_name">
                </div>
                <br>
                <br>
                <div class="form-group">
                    <label for="exampleInputPassword1">申请人姓名:</label>
                    <input type="text" class="form-control" id="number_1" placeholder="165042120" v-model="pro_stu_name">
                </div>
                <br>
                <div class="form-group">
                    <label for="exampleInputPassword1">申请人学号:</label>
                    <input type="text" class="form-control" id="number_1" placeholder="165042120" v-model="pro_stu_id">
                </div>
                <br>
                <br>
                <div class="form-group">
                    <label for="exampleInputPassword1">指导教师工号:</label>
                    <input type="text" class="form-control" id="number_1" placeholder="165042120" v-model="pro_tea_id">
                </div>

                <br>
                <div class="form-group">
                    <label for="exampleInputPassword1">指导教师姓名:</label>
                    <input type="text" class="form-control" id="number_1" placeholder="165042120" v-model="pro_tea_name">
                </div>

                <br>
                <div class="form-group">
                    <label for="exampleInputPassword1">获奖等级:</label>
                    <select class="form-control" name="v_class" id="" v-model="oneClass">
                        <option v-for="cl in v_class_1">{{cl.class}}</option>
                    </select>
                    <select class="form-control" name="v_class" id="twoClass" v-model="twoClass" v-show="isTwoC">
                        <option v-for="cl in v_class_2" v-if="cl.v_grade!=''">{{cl.grade}}</option>
                    </select>
                </div>
                <br>
                <br>
                <div class="form-group">
                    <label for="exampleInputPassword1">项目描述:</label>
                    <textarea class="form-control" rows="5" id="content_tetx" v-model="pro_content"></textarea>
                </div>
                <div class="clearfloat"></div>
                <br>
                <br>
                <!-- <div class="checkbox">
            <label>
                <input type="checkbox"> Check me out
            </label>
        </div> -->
                <div class="form-group">
                    <input type="submit" class="btn btn-default" value="提交">
                    </button>
                </div>
            </form>


        </div>
        <script>
            var appFrom = new Vue({
                el: '#app-form',
                data: {
                    types: '德育类型',
                    Etypes: 'varture',
                    pro_name: '',
                    pro_stu_id: '',
                    pro_stu_name: '',
                    pro_tea_name: '',
                    pro_tea_id: '',
                    pro_content: '',
                    v_class_1: '',
                    v_class_2: '',
                    oneClass: '',
                    twoClass: '',
                    isTwoC: false,

                },
                created: function () {
                    $.getJSON('/GQT/public/index/apply/getOneClass', { type: this.Etypes }, function (data) {
                        var _data = JSON.parse(data)
                        appFrom.v_class_1 = _data
                    })

                },
                watch: {
                    oneClass: function () {
                        if (this.oneClass != '') {
                            $.getJSON('/GQT/public/index/apply/getTwoClass', { type: this.Etypes, class: this.oneClass }, function (data) {
                                var _data = JSON.parse(data)
                                if (_data[0].grade != "") {
                                    appFrom.isTwoC = true
                                    appFrom.v_class_2 = _data
                                } else {
                                    appFrom.isTwoC = false
                                }
                            })
                        }
                    },
                    Etypes: function () {
                        $.getJSON('/GQT/public/index/apply/getOneClass', { type: this.Etypes }, function (data) {
                            var _data = JSON.parse(data)
                            appFrom.v_class_1 = _data
                        })
                    }
                },
                methods: {
                    submit: function () {
                        /*
                        type 类型
                        name 奖项名称
                        stu_id 学生id
                        stu_name 学生名字
                        tea_id 指导教师名字
                        tea_name 教师名字
                        content 内容
                        oneClass 一级
                        twoClass 二级
                        */

                        $.post('/GQT/public/index/apply/daclare',
                            {
                                type: this.Etypes,
                                name: this.pro_name,
                                stu_id: this.pro_stu_id,
                                stu_name: this.pro_stu_name,
                                tea_id: this.pro_tea_id,
                                tea_name: this.pro_tea_name,
                                content: this.pro_content,
                                oneClass: this.oneClass,
                                twoClass: this.twoClass
                            }, function (data) {
                                if (data == 1) {
                                    alert(申请成功)
                                } else {
                                    alert(data)
                                }

                            }).error(function () {
                                alert("申请失败,请检查信息是否正确")
                            })

                    }

                }
            })

        </script>
        <style>
            #app-form form .form-group select {
                width: 25%;
                display: inline;
                margin: 0 20px;
            }
        </style>

    </div>

</div>
{include file="common/footer"}